<template>
    <div class="shihui-box">
        <div :class="'shihui-item'+(index+1)" v-for="(lowerMoney,index) in list" :key="lowerMoney._system_record_entry_id">
            <div>
                <p>{{lowerMoney.title}}</p>
                <p>{{lowerMoney.viceTitle|formateTitle()}}</p>
            </div>
            <img :src="lowerMoney.image">
        </div>
    </div>
</template>
<script>
export default {
    props:{
        list:{
            type:Array,
            default(){
                return new Array(6);
            }
        }
    },
    filters:{
        formateTitle(arg){
            return arg.replace(/^\{|\}$/g,"");
        }
    }
}
</script>
<style lang="less" scoped>
//实惠直达分类样式
.shihui-box {
    width: 100%;
    box-sizing: border-box;
    height: 6rem;
    border: 1px solid @gray;
    border-left-width: 0px;
    border-right-width: 0px;
    display: grid;
    grid-template-columns: repeat(6, 7.5rem/6);
    grid-template-rows: repeat(7, 6rem/7);
    div {
        text-align: center;
        > p:first-child {
            font-size: 0.4rem;
            font-weight: bold;
        }
        > p:last-child {
            font-weight: bold;
            font-size: 0.3rem;
            color: @pink;
        }
    }
    > .shihui-item1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 5;
        display: flex;
        flex-flow: row wrap;
        align-items: flex-end;
        justify-content: center;
        padding: 0 0.5rem;
        border-right: 1px solid @gray;
        border-bottom: 1px solid @gray;
        > img {
            width: 100%;
            height: 2rem;
        }
    }
    > .shihui-item2 {
        grid-column-start: 4;
        grid-column-end: 7;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    > .shihui-item3 {
        grid-column-start: 4;
        grid-column-end: 7;
        grid-row-start: 3;
        grid-row-end: 5;
    }
    > .shihui-item2,
    .shihui-item3 {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 0.1rem;
        border-bottom: 1px solid @gray;
        > img {
            width: 0.8rem;
            height: 1rem;
        }
    }
    > .shihui-item4 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 5;
        grid-row-end: 8;
        border-right: 1px solid @gray;
    }
    > .shihui-item5 {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 5;
        grid-row-end: 8;
        border-right: 1px solid @gray;
    }
    > .shihui-item6 {
        grid-column-start: 5;
        grid-column-end: 7;
        grid-row-start: 5;
        grid-row-end: 8;
    }
    > .shihui-item4,
    .shihui-item5,
    .shihui-item6 {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        > img {
            width: 80%;
            height: 1.1rem;
            box-sizing: border-box;
            padding: 0 0.2rem;
            margin-bottom: 0.2rem;
        }
    }
}
</style>